<template>
  <div>
      <div style="margin:20px 0;">
        <el-alert :title="`当前审批中 ${currApproveCount} 本月审批通过 ${approveCount} 本月审批驳回 ${rejectionCount}`"         type="success" show-icon icon="el-icon-info">
        

        </el-alert>
      </div>
       <el-table
            ref="multipleTable"
            :data="approvalList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
              <el-table-column label="序号"
              type="index"
              sortable
              width="45">
            </el-table-column>
            <el-table-column
              label="审批类型"
              prop="processName"
              width="120" sortable>
             
            </el-table-column>
            <el-table-column
              label="申请人"
              width="120"
              prop="username"
              sortable>
            
            </el-table-column>
            <el-table-column label="当前审批人" prop="procCurrNodeUserName">

            </el-table-column>
            <el-table-column label="审批发起时间" prop="procApplyTime">

            </el-table-column>
             <el-table-column label="审批状态">
                <template #default="{row}">
                  <div>
                    <el-link v-if="row.processState==0">
                      已提交
                    </el-link>
                      <el-link v-if="row.processState==1">
                      审批中
                    </el-link>
                      <el-link v-if="row.processState==2">
                      审批通过
                    </el-link>
                      <el-link v-if="row.processState==3">
                      审批不通过
                    </el-link>
                      <el-link v-if="row.processState==4">
                      撤销
                    </el-link>
                  </div>
                </template>
            </el-table-column>
               <el-table-column label="操作">
                <template #default="{row}">
                  <div>
                      <el-button type="primary">审批</el-button>
                      <el-link type="primary" @click="toInfo(row.processId)">查看</el-link>
                  </div>
                </template>
            </el-table-column>
        
          </el-table>
  </div>
</template>
<script>
import {getApprovalList} from '@/api/approval'
import {mapGetters} from 'vuex'
export default {
  name: 'powerIndex',
  data() {
    return {
      approveCount:0,//审批通过的数量
      currApproveCount:0,//当前审批的数量
      rejectionCount:0,//驳回的数量
      pageSize:10,
      approvalList:[],
     
        multipleSelection: []
    };
  },
 computed:{
  ...mapGetters(['userObj']) //注入  vuex中的用户信息
 },
 created(){
  this.getApproval();
 },
  mounted() {
    
  },

  methods: {
    toInfo(id){ //跳转详情并传递id
      this.$router.push(`/layout/approvaldetail/${id}`)

    },
   async  getApproval(){
      let res=await getApprovalList(this.userObj.departmentId,this.pageSize)
      console.log(res,"获取的审批列表")
      this.approvalList=res.data.rows;
      this.approveCount=res.data.approveCount;
      this.currApproveCount=res.data.currApproveCount;
      this.rejectionCount=res.data.rejectionCount;
    }
  },
};
</script>